<template>
	<view class="full-page">
		<view class="fill-box flex flex-1">
			<with-fill-sentence
				v-if="wordList.length > 0"
				:word-list="wordList"
				@update-group="handleUpdateGroup"
				@next="handleNext"
			/>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, nextTick } from 'vue';
	import { ktlapi, OT, lodash } from '@/utils';
	import { IWord } from '@/store/study';
	import WithFillSentence from '@/pages-study/components/fill-sentence/with-fill-sentence.vue'
	
	/** 单元测试：句词测试 */
	
	const wordList = ref<IWord[]>([]);
	
	// 句词测试，单组测试完成
	function handleUpdateGroup(sentenceEn: string, isRight: boolean, answer: any[]) {
		console.log('fill-sentence-test >>> handleUpdateGroup >>> sentenceEn = ', sentenceEn)
		console.log('fill-sentence-test >>> handleUpdateGroup >>> isRight = ', isRight)
		console.log('fill-sentence-test >>> handleUpdateGroup >>> answer = ', answer)
		console.log('fill-sentence-test >>> handleUpdateGroup === 句词测试，单组测试完成')
	}
	
	// 全部完成，下一步
	function handleNext() {
		console.log('fill-sentence-test >>> handleNext === 全部完成，下一步')
	}
	
	ktlapi({
		apiurl: OT.CommandSet,
		action: 'Cus_GetLessonSentenceByStudent',
		data: {
			LessonId: '9c72f721-152b-4d20-aed2-c3b8836a953a'
		}
	}).then(resp => {
		// 学习句子
		const sentence = lodash.get(resp, 'data.tables[0].table[0]', {});
		// 学习词汇
		const wordGroup = lodash.get(resp, 'data.tables[1].table', []);
		
		if (sentence.WordIds) {
			sentence.WordIds = JSON.parse(sentence.WordIds);
		}
		
		wordGroup.forEach((item: any) => {
			item.SentenceSnapshot = sentence;
		})
		
		console.log('sentence', sentence)
		console.log('wordGroup', wordGroup)
		nextTick().then(() => {
			wordList.value = wordGroup;
			console.log('wordList.value', wordList.value)
		})
	})
	
</script>

<style lang="scss" scoped>
	.full-page{
		--status-bar-height: 44px;
		height: calc(100vh - var(--status-bar-height));
		display: flex;
		flex-flow: column;
		
	}
	
	.fill-box{
		width: calc(100vw - 20px);
		margin: 0 auto;
	}
</style>